<template>
  <div>
    <van-nav-bar
      class="link"
      title="找房输入框"
      left-arrow
      @click-left="$router.go(-1)"
    />
    <div>
      <van-dropdown-menu>
        <van-dropdown-item title="区域">
          <van-picker :columns="columns" @change="onChange"></van-picker>
          <div class="btn-box">
            <van-button type="default" block @click="onCancle">
              取消
            </van-button>
            <van-button type="primary" block @click="onConfirm">
              确认
            </van-button>
          </div>
        </van-dropdown-item>
        <van-dropdown-item title="方式">
          <!-- <van-picker columns="'北京'" /> -->
        </van-dropdown-item>
        <van-dropdown-item title="租金">
          <!-- <van-picker columns="'北京'" /> -->
        </van-dropdown-item>
        <van-dropdown-item title="筛选">
          <!-- <van-picker columns="'北京'" /> -->
        </van-dropdown-item>
      </van-dropdown-menu>
    </div>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <HousesItem v-for="item in list" :key="item.houseCode" :item="item" />
    </van-list>
  </div>
</template>

<script>
import { lookHouse, lookHouseConditon } from '@/api/house'
import HousesItem from '@/components/HouseItem.vue'
export default {
  components: {
    HousesItem
  },
  data () {
    return {
      columns: [
        // {
        //   text: '浙江',
        //   children: [
        //     {
        //       text: '杭州',
        //       children: [{ text: '西湖区' }, { text: '余杭区' }]
        //     },
        //     {
        //       text: '温州',
        //       children: [{ text: '鹿城区' }, { text: '瓯海区' }]
        //     }
        //   ]
        // },
        // {
        //   text: '福建',
        //   children: [
        //     {
        //       text: '福州',
        //       children: [{ text: '鼓楼区' }, { text: '台江区' }]
        //     },
        //     {
        //       text: '厦门',
        //       children: [{ text: '思明区' }, { text: '海沧区' }]
        //     }
        //   ]
        // }
      ],
      list: [],
      page: 1,
      pageSize: 10,
      loading: false,
      finished: false,
      areaList: []
    }
  },
  async created () {
    const id = localStorage.getItem('cityId')
    const res = await lookHouseConditon(id)
    console.log(res)
    const firAreaChildren = res.body.area.children.map(item => item.label)
    const firSubwayChildren = res.body.subway.children.map(item => item.label)
    const secChildren = res.body.area.children[1].children.map(item => item.label)
    console.log(secChildren)
    for (let i = 0; i < res.body.area.children.length; i++) {
      console.log(res.body.area.children[i])
      for (let j = 0; j < res.body.area.children[i].children.length; j++) {
        console.log(res.body.area.children[i][j])
      }
    }
    this.columns.push({
      text: res.body.area.label,
      children: [...firAreaChildren]
    },
    {
      text: res.body.subway.label,
      children: [...firSubwayChildren]
    }
    )
  },
  methods: {
    onChange () {},
    onCancle () {},
    onConfirm () {},
    async onLoad () {
      const res = await lookHouse()
      console.log(res)
      this.loading = false
      this.list.push(...res.body.list)
      this.finished = true
      // 判断没有数据了 显示没有更多
      if (this.length === res.body.list.length) {
        this.finished = true
      }
    }
  }
}
</script>

<style scoped>
.link {
  background-color: #21b97a;
}
::v-deep .van-nav-bar__title,
.van-ellipsis {
  color: #fff;
  font-size: 18px;
  font-weight: 400;
}
::v-deep .van-icon,
.van-icon-arrow-left,
.van-nav-bar__arrow {
  color: #fff;
}
* {
  padding: 0;
  margin: 0;
}
.link {
  background-color: #21b97a;
}
::v-deep .van-nav-bar__title,
.van-ellipsis {
  color: #fff;
  font-size: 18px;
  font-weight: 400;
}
::v-deep .van-icon,
.van-icon-arrow-left,
.van-nav-bar__arrow {
  color: #fff;
}
.btn-box {
  display: flex;
  align-items: center;
}
.btn-box .van-button {
  width: 50%;
}
</style>
